<template>
  <div class="regist">
    <div class="login-wrap">
      <el-form
        class="login-form"
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        label-width="100px"
      >
        
        <h2>WELCOME TO REGIST</h2>
        <el-form-item label="用户名" prop="userName">
          <el-input
            type="text"
            v-model="ruleForm.userName"
            prefix-icon="el-icon-user-solid"
            class="custom-input"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            type="text"
            v-model="ruleForm.phone"
            prefix-icon="el-icon-user-solid"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="warning"
            @click="handleRegist('ruleForm')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
    };
    var validateuserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        userName: "",
        password: "",
        checkPass: "",
        phone: "",
      },
      rules: {
        userName: [{ validator: validateuserName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        
      },
    };
  },
  methods: {
    handleRegist: async function () {
     
        const result = await this.$http.post("/client/regist", this.ruleForm);
        console.log(result.status);
        if (result.status == 200) {
          this.$message({
            type: "success",
            message: "注册成功",
          });
          this.$router.push({ path: "/login" });
        } else {
          this.$message({
            type: "error",
            message: "用户繁忙请稍后",
          });
        }
      } 


    }
  
}
</script>


   
   <style scoped>
.regist {
  background-color: #324152;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.login-wrap .login-form {
  background-color: #fff;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
}

.login-wrap .login-title {
  font-size: 26px;
  font-weight: bold;
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.login-wrap .login-form .login-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-wrap .login-form {
  background-color: #fff;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
}
.login-wrap .login-form .login-button {
  width: 100%;
}
</style>